<!DOCTYPE HTML>
<html>
<head>
	<meta charset="utf-8">
	<title>天天美印</title>
	<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
	<script type="text/javascript" src="jquery.js"></script>
	<script type="text/javascript" src="bootstrap.min.js"></script>
	<script type="text/javascript" src="hammer.min.js"></script>
	<script type="text/javascript" src="swiper.min.js"></script>
	<link type="text/css" rel="stylesheet" href="common.css" />	
	<link type="text/css" rel="stylesheet" href="bootstrap.min.css" />
	<link type="text/css" rel="stylesheet" href="swiper.min.css" />
	<style type="text/css">
        ul,li{
            padding:0;
            margin:0;
        }
    body{
        /*background:#f2f2f2;*/
    }
    
    /*main css*/
    #main{
        width:100%;
    }
    div#cover{
        position: relative;
    }
    div#cover img{
        width:100%;
    }
    div#cover div#category{
        display: block;
        position: absolute;
        bottom:0;
        left:0;
        width:100%;
        background: rgba(255,255,255,0.7);
        color:#000;
        font-size:1.8rem;
        padding:12px;
        font-weight: bold;
    }
    div#cover div#category div{
        float: right;
        display: inline-block;
        color:#808080;
        font-size:1.5rem;
        margin-top:3px;
        font-weight: normal;
    }
    div#cover div#category div span{
        margin-left:5px;
        text-decoration: line-through;
    }
    
    div#price{
        padding:12px;
        color:#363133;
        font-size:2rem;
        font-weight: bold;
        position: relative;
        margin-bottom:20px;
    }
    div#price:after{
        content: '';
        width:100%;
        height: 15px;
        background: url(wave_line.png) center center no-repeat;
        background-size:100%;
        position: absolute;
        top:50px;
        left:0;
    }
    div#price button{
        float:right;
        font-size:1.8rem;
        margin-top:2px;
        background: transparent;
        color:#ec135a;
        border:none;
        border-radius:15px;
        font-weight: normal;
    }
    
    h3{
        background: #dcdcda;
        color:#221c1c;
        text-align: center;
        margin:7px 0 0;
        font-size:1.8rem;
        padding:3px 0;
    }
    div#product-details{
        text-align: center;
    }
    div#product-details p{
        padding:0;
        margin:0;
    }
    div#product-details div{
        padding:12px;
    }
    div#product-details img{
        display: block;
        width:100%;
        height:auto !important;
    }
    
    /*轮播图*/
    #banner{
        background: #303030;
        width:100%;
        overflow-x:hidden;
        padding:5px 5px 5px 0px;
    }
    #banner ul{
        width:100%;
        overflow-x:auto;
        word-break:keep-all;
        white-space:nowrap;
    }
    #banner ul li{
        display: inline-block;
        margin-left:5px;
        width:25%;
    }
    #banner ul li img{
        width:100%;
    }
    i{
        font-style:normal;
    }
	</style>
</head>
<body>
	<!-- <div id="header">
		<div class="topbar">
			<span>我的时鲜生</span>
		</div>
	</div> -->
	<div id="main">
		<div id="cover">
            <img src="detail_01.png" />
            <div id="category">
				<span id="category_name">毕业纪念台历</span>
                <div>
                    总价:<i id="newPrice">25.0</i>元<span>￥<i id="oldPrice">50.5</i>元</span>
                </div>
            </div>
		</div>
        
		<div id="banner">
            <!--            <ul>-->
            <!--				<li><img src="../images/work_01.png" /></li>-->
            <!--                <li><img src="../images/work_01.png" /></li>-->
            <!--                <li><img src="../images/work_01.png" /></li>-->
            <!--                <li><img src="../images/work_01.png" /></li>-->
            <!--                <li><img src="../images/work_01.png" /></li>-->
            <!--            </ul>-->
	   	</div>
	   	<div id="price">
<!--			￥<span>39.00</span>-->
            宝贝详情
		<!--	<button class="toorder">继续编辑</button> -->
	   	</div>
   	 	<div id="product-details">
			<h3>旅行记——实木创意台历</h3>
			<div id="content">
				<p>原木底座，天然，简约手工质朴</p>
				<img src="detail_01.png" />
			</div>
   	 	</div>
	</div>
	<div id="footer">
		
	</div>
</body>
<script type="text/javascript">
    var product = api.getProductInfoS();
    var imagePath = api.getImagePath();
    
    $("#category_name").html(product.category);
    $("#product-details h3").html(product.category+"--"+product.name);
    $("#newPrice").html(product.price);
    $("#oldPrice").html(product.prom);
    
    var imgdiv = '<ul>';
    $("#banner").html("");
    for(var i in imagePath){
        var img = imagePath[i];
        imgdiv += '<li><img class="swiper-img" src="'+img+'" /></li>';
        
        
    }

    imgdiv+="</ul>";
$("#banner").html(imgdiv);
    
    //alert(imagePath);
	$(document).ready(function(){
		// $("ul li:after").css("margin-top",$("ul li img").height());


    	var productid = product.productid;

    	$.ajax({ 
          url:"http://ttmy.len.so/app/appapi/getcontent/id/"+productid, 
          type:'get',     
          dataType:'JSONP',
          //data:{name:value},           
          success: function(data){
          	//console.log(data)
          	$("#content").html(data.content);
               $("#cover img").attr("src",'http://7xqkvn.com1.z0.glb.clouddn.com/'+data.cover+'?imageView2/2/w/600');
          }
        })
	})

 	function bindEvent () {
	  	var mc = new Hammer.Manager(document.body);
	    mc.add(new Hammer.Tap());
	    
	    mc.on("tap", function (e) {
	    	
	        var className=$(e.target).attr("class");

	        if(className=="toorder"){
	        	//下单事件
              api.pushTonextController();
	        }
              
              if(className == "swiper-img"){
              var imgsrc = $(e.target).attr("src");
              api.showBigImage(imgsrc);
              
              }

	        // if(e.target.id=="btn-login"){
	        // 	window.location.href=$(e.target).attr("data")+".html";
	        // }

	    });
	}
	bindEvent();
</script>
</html>